<template>
  <div class="stat-card">
    <div class="stat-header">
      <span class="stat-label">{{ label }}</span>
      <i class="stat-icon" :class="iconClass"></i>
    </div>
    <div class="stat-value">
      <span class="value">{{ value }}</span>
      <span class="unit">{{ unit }}</span>
    </div>
    <div class="stat-chart" v-if="showChart">
      <svg class="mini-chart" viewBox="0 0 225 30">
        <path :d="chartPath" stroke="#1677FF" stroke-width="2" fill="none"/>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StatCard',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      required: true
    },
    unit: {
      type: String,
      default: ''
    },
    iconClass: {
      type: String,
      default: ''
    },
    showChart: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    chartPath() {
      if (!this.chartData.length) {
        // 默认路径
        return "M0,15 Q56.25,5 112.5,10 T225,8";
      }
      
      // 根据数据生成路径
      const width = 225;
      const height = 30;
      const points = this.chartData.map((value, index) => {
        const x = (index / (this.chartData.length - 1)) * width;
        const y = height - (value / Math.max(...this.chartData)) * height;
        return `${x},${y}`;
      });
      
      return `M${points.join(' L')}`;
    }
  }
}
</script>

<style scoped>
.stat-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  padding: 25px;
  position: relative;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.stat-label {
  color: #6B7280;
  font-size: 14px;
}

.stat-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-online::before { content: "🟢"; }
.icon-alert::before { content: "🔴"; }
.icon-pressure::before { content: "🔵"; }
.icon-signal::before { content: "🟣"; }

.stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px;
}

.value {
  font-size: 24px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.88);
}

.unit {
  color: #6B7280;
  font-size: 14px;
}

.stat-chart {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
}

.mini-chart {
  width: 100%;
  height: 30px;
}
</style>
